<template>
  <div class="app-container">
    <el-row type="flex">
      <el-input
        v-model="input"
        style="width: 300px"
        placeholder="请输入搜索的内容"
        class="input-with-select"
        @input="handlerInput"
      >
        <el-button slot="append" icon="el-icon-search"/>
      </el-input>
    </el-row>

    <el-table
      style="margin-top: 10px"
      :data="showList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="房源名称">
        <template slot-scope="scope">{{ `${scope.row.city}${scope.row.address}${scope.row.detailAddress}` }}</template>
      </el-table-column>
      <el-table-column label="房源图片" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.photo.split(',')[0]"/>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房屋面积" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.area }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月租金" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='0'" type="warning">未审核</el-tag>
          <el-tag v-if="scope.row.status==='1'" type="success">已审核</el-tag>
          <el-tag v-if="scope.row.status==='2'" type="danger">已下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="left">
        <template slot-scope="scope">
          <router-link :to="`/house/detail/${scope.row.id}`">
            <el-button size="mini" type="primary">查看</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="query.current"
      :page-size.sync="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="getHouseList"
      @current-change="getHouseList"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getHouseList } from '@/api/house'

export default {
  filters: {
    parseTime
  },
  data() {
    return {
      input: '',
      list: [],
      showList: [],
      houseList: [],
      query: {
        current: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  watch: {
    input(value) {
      console.log(this.houseList)
      this.showList = this.houseList.filter(item => item.advantages.indexOf(value) >= 0 ||
        item.address.indexOf(value) >= 0 ||
        item.description.indexOf(value) >= 0 ||
        item.detailAddress.indexOf(value) >= 0 ||
        item.phoneNumber.indexOf(value) >= 0 ||
        item.area.toString().indexOf(value) >= 0 ||
        item.price.toString().indexOf(value) >= 0 ||
        item.shape.indexOf(value) >= 0 ||
        item.city.indexOf(value) >= 0)
    }
  },
  created() {
    this.getHouseList()
  },
  methods: {

    async getHouseList() {
      const res = await getHouseList(this.query)
      console.log(res)
      this.houseList = this.showList = res.data.list.sort((a, b) => a.status - b.status)
      this.total = res.data.total
    },
    handlerInput() {

    }
  }
}
</script>
